<!-- subpkg_archive/form/index.vue -->
<script setup lang="ts">
import { ref } from 'vue'
import { addPatientApi, patientDetailApi, updatePatientApi } from '@/apis/patient'
import type { PatientParams } from '@/types/patient';   //导入.d.ts类型声明文件要使用 import type，即要添加type。

// 1. 表单数据
const formData = ref({
  name: '', // 姓名
  idCard: '', // 身份证
  gender: 1, // 性别
  defaultFlag: 1, // 是否为默认 1 是，0 不是
}as PatientParams) 

// 组件无法获取我们需要的数据，咱们需要自行转换数据格式（基本功）
const defaultChange = e => {
  // console.log(e)
  formData.value.defaultFlag = e.detail.value ? 1 : 0
}

// 3. 表单校验
const form = ref()
const formRules = {
  name: {
    rules: [
      { required: true, errorMessage: '请填写患者姓名' },
      {
        // 中文
        pattern: '^[\u4e00-\u9fa5]{2,5}$',
        errorMessage: '患者姓名为2-5位中文',
      },
    ],
  },
  idCard: {
    rules: [
      { required: true, errorMessage: '请输入身份证号' },
      {
        // 身份证号
        pattern: '^[1-9]\\d{5}(?:18|19|20)\\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\\d|30|31)\\d{3}[\\dXx]$',
        errorMessage: '身份证号格式不正确',
      },
    ],
  },
  gender: {
    rules: [
      { required: true, errorMessage: '请勾选患者姓名' },
      {
        // rule 规则
        // value 当前数据（可以获取当前的数据）
        // data 完整数据
        validateFunction(rule, value, data, callback) {
          // 从身份证号中，获取倒数第二位
          const maleNum = formData.value.idCard.slice(16, 17)
          // 判断 单双数 单数，男，双 女
          //  maleNum %2  ===0 or 1 计算出来的性别
          // 计算出来的性别 和选择的性别比较

          if (maleNum % 2 == value) {
            return true // 校验通过
          }
          // 校验失败，提示用户
          callback('性别和身份信息不符，请检查')

          // 跟当前选择的性别进行比较 相同-校验通过，不相同，提示用户
          // 测试代码
          // console.log('rule：', rule)
          // console.log('value', value)
          // console.log('data', data)
          // if (value == 1) {
          //   // 校验失败，并返回错误信息
          //   // callback('是男孩子')
          //   // 校验通过
          //   return true
          // }
          // callback('是女孩子')
        },
      },
    ],
  },
}

const submitData = async () => {
  console.log(form.value)
  try {
    await form.value.validate()
    if (!props.id) {
      //新增
      // 校验通过
    await addPatientApi(formData.value)
    }else{
      //修改
      //根据接口文档需要的数据，组合起来再进行提交
      await updatePatientApi({
        name: formData.value.name,
        idCard: formData.value.idCard,
        gender: formData.value.gender,
        defaultFlag: formData.value.defaultFlag,
        id: props.id,
      } as PatientParams)
    }
    
    // 提示用户
    uni.showToast({
      title: '成功~',
    })
    // 返回上一页
    uni.navigateBack()
  } catch (error) {
    // 校验 失败
  }
}


// 4. 编辑用户
// import { onLoad } from '@dcloudio/uni-app'

// // 生命周期（页面加载完成）
// // 注册回调函数，满足条件才执行（一定会延迟一点点）
// onLoad(query => {
//   console.log('onLoad:', query?.id)
// })

// 使用 defineProps 接收地址参数
// 页面一解析就会执行，props.id可以获取 查询参数中的 id
// url?id=xxx&male=xxx
const props = defineProps<{
  id: string
  // male:string
}>()
console.log('prop:', props.id)
// console.log('male:', props.male)

// 获取用户数据
const getUserData = async () => {
  if (!props.id) {
    // 阻断后续执行
    return
  }
  // id 存在的获取数据即可
  const res = await patientDetailApi(props.id)
  //   console.log(res)
  formData.value = res
  //修改标题
  uni.setNavigationBarTitle({
    title:'修改患者',
  })
}
getUserData()
</script>

<template>
  <scroll-page>
    {{ formData }}
    <view class="archive-page">
      <uni-forms :rules="formRules" :model="formData" border label-width="220rpx" ref="form">
        <uni-forms-item label="患者姓名" name="name">
          <uni-easyinput
            v-model="formData.name"
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写真实姓名"
          />
        </uni-forms-item>
        <uni-forms-item label="患者身份证号" name="idCard">
          <uni-easyinput
            v-model="formData.idCard"
            placeholder-style="color: #C3C3C5; font-size: 32rpx"
            :styles="{ color: '#121826' }"
            :input-border="false"
            :clearable="false"
            placeholder="请填写身份证号"
          />
        </uni-forms-item>
        <uni-forms-item label="患者性别" name="gender">
          <uni-data-checkbox
            selectedColor="#16C2A3"
            v-model="formData.gender"
            :localdata="[
              { text: '男', value: 1 },
              { text: '女', value: 0 },
            ]"
          />
        </uni-forms-item>
        <uni-forms-item label="默认就诊人" name="defaultFlag">
          <view class="uni-switch">
              <!-- checked 动态的设置布尔值，即可实现格局用户选中或者取消选中 -->
              <switch @change="defaultChange" :checked="formData.defaultFlag == 1" color="#20c6b2" style="transform: scale(0.7)" />
          </view>
        </uni-forms-item>
        <button @click="submitData" class="uni-button">保存</button>
      </uni-forms>
    </view>
  </scroll-page>
</template>

<style lang="scss">
@import './index.scss';
</style>
